<template>
  <div class="beauty">
    <div class="content-url">
      <div class="img" :class="{backImg: item.index === 1}" v-for="(item,index) in beautyData.beauty_img" :key="item.index">
        <div class="img_beauty">
          <img :src="item.beauty" alt="">
        </div>
      </div>
      <div class="main_url">
        <img :src="beautyData.beauty_url" alt="">
      </div>
    </div>
    <div class="Copyright">
      <p>电信与信息服务业务经营许可证100798号 <span>营业执照</span></p>
      <p><a href="javascript:;">京ICP备11031139号</a>  京公网安备110108006045   客服电话：4000-800-577  文明办网文明上网举报电话：010-82615762  </p>
      <p><a href="javascript:;">违法不良信息举报中心</a></p>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {beautyClass} from "network/detail";

  export default {
    name: "beauty",
    data() {
      return {
        beautyData: {}
      };
    },
    created() {
      this._axios_methods();
    },
    methods: {
      _axios_methods() {
        axios.get("/apis/beauty").then(res => {
          this.beautyData = new beautyClass(res.data.data);
        });
      }
    },
    watch: {
      beautyData(val, oldValue) {
        val.beauty_img.forEach((item) => {
          item.beauty = require("assets/images/beauty/" + item.beauty + ".png")
        });
        val.beauty_back = require("assets/images/beauty/" + val.beauty_back + ".jpg")
        console.log(val.beauty_url)
        val.beauty_url = require("assets/images/beauty/" + val.beauty_url + ".png")
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .beauty
    position: relative;
    z-index 999;
    height 100%;
    width 100%;
    background-color #F2F2F2;
    .content-url
      width 100%;
      height 100%;
      .img
        .img_beauty
          height 100%;
          img
            width 100%;
      .backImg
        background url("~assets/images/beauty/a4.jpg") no-repeat 50%;
        padding: 40px 0px 130px 40px;
      .main_url
        height 136px;
        width 100%;
        background-color #fc4955;
        text-align center;
        img
          margin 30px auto 0px auto;
    .Copyright
      text-align center;
      font-size 12px;
      padding 10px 0;
</style>